<template>
	<view>
		<view class="cu-list menu menu-avatar goods-list">
			<!-- 小标题 -->
			<view class="cu-bar margin-top solids-bottom padding-top padding-bottom bg-white">
				<view class="">
					<text class="cuIcon-titles text-xxl text-yellow"> </text>
					<text class="text-black text-xl padding-left-sm">{{orderType}}共{{totCount}}本</text>
				</view>
			</view>
						<view class="animation-fade" style="pointer-events: auto;">
							<!-- <my-bookList  @toDetail="toDetail" @onDelete="onDelete" :totPrice.sync="totPrice" :totCount.sync="totCount" :saleBooks.sync="saleBooks" :allChoosed.sync="allChoosed"></my-bookList> -->
							<view class="cu-card no-card">
								<view class=" shadow  solids-bottom cu-item cf content padding-right-sm" v-for="(item,index) in payOrder" :key="item.img">
		
									<!-- 左边 -->
									<view class="fl flex " style="width: fit-content;">
										<!-- 书本图片 -->
										<view class="image padding">
											<image style="width: 100rpx;height: 130rpx;" :src="item.img"></image>
										</view>
		
									</view>
		
									<!-- 右边 -->
									<view class="">
										<!-- 右边的上面 -->
										<view style="height: 170rpx;" class=" margin-top flex justify-between">
											<view>
												<view class="text-black" style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow: hidden;text-overflow: ellipsis;">
													<text>{{item.title}}</text>
												</view>
												<view class="text-gray text-sm">{{item.author}}</view>
											</view>
												<!-- 右边下面 -->
											<view class="">
												<view class="text-price margin-right-xl text-black text-lg">{{item.price}}</view>
												<view class="margin-top-xl">共{{item.num}}本</view>
											</view>
										</view>
									</view>
									
									
								</view>
							</view>
						</view>
						<!-- 押金和运费部分 -->
						<view class="shadow  solids-bottom">
							<view class="flex justify-between bg-white padding-left padding-right text-lg text-black padding-top">
								<view class="">
									商品总价
									<text v-if="orderType === '购物车(租书)'">(押金)</text>
								</view>
								<view class="text-price">
									{{totPrice.toFixed(2)}}
								</view>
							</view>
							<view class="flex justify-between bg-white padding-left padding-right text-lg text-black padding-top-sm padding-bottom">
								<view class="">
									运费
								</view>
								<view class="text-price">
									{{freight.toFixed(2)}}
								</view>
							</view>
							<view v-if="orderType === '购物车(租书)'" class="flex justify-between bg-white padding-left padding-right text-lg text-black padding-bottom">
								<view class="">
									租金
								</view>
								<view class="cuIcon-question text-yellow text-xxl" @click="checkDetail">
								</view>
							</view>
							
							
						</view>
						<!-- 总计部分 -->
						<view class="cu-bar bg-white flex justify-end padding-right text-lg">
							小计：
							<view class="text-price text-red">{{finalPrice}}</view>
						</view>		
			</view>

		<uni-popup ref="showImg" type="center" maskClick="ture">
			<view>
				<image @click="handlePreview" class="image" src="https://ae01.alicdn.com/kf/H128dca58f1de40d4bd088605f991c8da3.jpg" mode="widthFix" />
				
			</view>	
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				totCount:0,
				totPrice: 0,
				order:[],
				finalCost:0
			};
		},
		methods:{
			checkDetail(){
				this.$refs['showImg'].open();
			},
			handlePreview(){
				uni.previewImage({
					urls: new Array("https://ae01.alicdn.com/kf/H128dca58f1de40d4bd088605f991c8da3.jpg")
					
				})
			},
		},
		mounted() {
			let sum = 0;
			this.order = this.payOrder;
			for(var index in this.order){
				this.totCount+=Number(this.order[index].num);
				this.totPrice+=Number(this.order[index].price*this.order[index].num)
			};
			
			this.$emit("totPrice",this.totPrice);
		},
		computed:{
			finalPrice(){
				return (this.totPrice+this.freight).toFixed(2)
			}
		},
		props:{
			payOrder:{
				type:Array,
				value:[]
			},
			orderType:{
				type:String,
				value:""
			},
			freight:{
				type:Number,
				value:0
			}
		}
	}
</script>

<style>

</style>
